Skip to content

feat: markdown 表格闭合边框渲染 + CJK/emoji 宽度适配#115

Merged
qorzj merged 4 commits into
lessweb:mainfrom
dengmik-commits:feat/table-render
May 25, 2026
Merged

feat: markdown 表格闭合边框渲染 + CJK/emoji 宽度适配#115
qorzj merged 4 commits into
lessweb:mainfrom
dengmik-commits:feat/table-render

Conversation

@dengmik-commits
Copy link
Copy Markdown
Contributor

@dengmik-commits dengmik-commits commented May 23, 2026

概述

当前 deepcode-cli 的 markdown 表格仅原样输出 | col1 | col2 | 分隔符,排版简陋、宽度溢出时自动被 Ink 断行导致错乱。本次改动增加了闭合边框表格渲染、CJK 宽字符和 emoji 视觉宽度计算、单元格内自动换行,以及表格与普通文本分离渲染。

效果

变更

src/ui/components/MessageView/markdown.ts

  • 新增 visualWidth(text) — 按终端列宽计算字符视觉宽度(CJK 字符、全角、emoji = 2 列,ASCII = 1 列)
  • 新增 splitTableBlocks(text) — 从文本中检测和解析 markdown 表格(| col | col | + ---|---
  • 新增 renderTableBorder(rows, maxWidth) — 渲染闭合边框表格:
    • 基于视觉宽度的列宽计算
    • 列宽分配:窄列(#、状态、评论、日期)优先压缩,内容列保有最少 12 字符
    • 单元格内逐字符自动换行,满格时在最后一个空格处截断
  • 新增 renderMarkdownSegments(text, maxWidth) — 将文本拆分为 text/table/code 分段
  • renderMarkdown() 委托给 renderMarkdownSegments()(向后兼容)

src/ui/components/MessageView/index.tsx

  • 内容渲染改用 renderMarkdownSegments() 返回的分段数组
  • 表格<Text wrap="truncate-end"> 渲染,彻底杜绝 Ink 在单元格空格处断行
  • 普通文本<Text> 默认 wrap,保持正常折行

src/ui/index.ts

  • 导出 renderMarkdownSegments

验证

npm run typecheck    # ✅ 零错误
npm run bundle       # ✅ dist/cli.js

- Detect markdown tables and render with Unicode box-drawing characters
- Calculate visual terminal width for CJK/emoji (2 cols) vs ASCII (1 col)
- Wrap long cells across multiple lines, prefer word-boundary breaks
- Allocate column widths: narrow columns (#, status, count, date) minimal,
  content columns kept >= 12 chars
- Render tables with <Text wrap="truncate-end"> to prevent Ink from
  breaking box-drawing lines at cell boundary spaces
- Expose renderMarkdownSegments() for per-segment wrapping control
@dengmik-commits
Copy link
Copy Markdown
Contributor Author

Screenshot_2026-05-23_195028

@qorzj
Copy link
Copy Markdown
Collaborator

qorzj commented May 25, 2026

@dengmik-commits 我这边测出的问题是:每一列都是限制了固定宽度,导致表格宽度过小高度过大,看能否再优化一下呢

我本地环境:macOS + iterm2

请用 Markdown 表格列出 5 个待办事项,列包括:编号、状态、任务、备注。备注里写长一点,确保会换行。

image

请输出一个 Markdown 表格,对比三个功能方案:方案 A、方案 B、方案 C。列包括:Feature、中文说明、Status、Trade-off。Status 使用 emoji,Trade-off 同时包含英文短语和中文解释。

image

…row to fill terminal

Replace the aggressive maxLine/1.5 ideal-width heuristic with full natural
widths. When the total fits within the available terminal width (defaulting
to 120 cols), distribute slack proportionally to content columns instead of
leaving them cramped. Detect narrow label columns by actual content width
(≤8 chars) rather than hardcoded position ([0, 1, -2, -1]). When compression
is necessary, start from per-column minimums (longest word) and share the
remaining budget proportionally based on each column's deficit.

This fixes the "tables too narrow and too tall" issue reported on PR lessweb#115
where every column was forced to ~67% of its natural width regardless of
available screen real estate.
@dengmik-commits
Copy link
Copy Markdown
Contributor Author

@qorzj 已优化列宽分配策略:

  1. 移除 / 1.5 激进缩列 — 用完整自然宽度作为 ideal,不再对所有列打 67 折
  2. 主动扩展填满终端 — 内容不长时按内容列权重成比例扩展,默认按 120 列终端计算
  3. 窄列检测改为内容驱动 — 按实际宽度 ≤8 判断标签列(如编号、状态),不再硬编码 [0, 1, -2, -1] 位置
  4. 缩列按需分配 — 需要压缩时从每列最小宽度(最长词)起步,剩余空间按各列缺口比例分配

麻烦再测一下你那边 macOS + iTerm2 的效果。

@qorzj qorzj merged commit c5f1a00 into lessweb:main May 25, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants